import React, { Component } from 'react';

class App extends Component {

  constructor(props){
    super(props)
    this.test = this.test.bind(this)
  }

  add = function(val, event){
    console.log(val, event, this);
  }

  addNum = (val,event)=>{
    console.log(val,this, event);
  }


  test = function(val){
    console.log(val);
  }


  render() {
    return (
      <div>
        <button onClick={this.add.bind(this, 10)}>事件传参 1  ----- 可以传递</button>

        {/*
          如果外部写的是一个箭头函数，我们调用的时候就不能添加 () 来进行调用
          这里如果直接调用，会理解为普通的函数调用，只有在刚运行的时候才会执行一次
          后期的点击将不会再被执行
        */}
        <button onClick={this.addNum(100)}>事件传参 2 ----- 不能传递参数  </button>

        <button onClick={this.test}>事件传参 3 ----- 不能传递</button>



        <button onClick={(e)=>{
          // 如果外部定义的是一个普通函数我们直接调用，可以将普通函数的 this 改变为当前组件实例
          // 调用该函数的时候可以传递自己的参数，同时也可以将 event 携带过去
          // this.add(100,e)

          // 如果外部定义的是一个箭头函数，那么我在这里调用的时候可以直接将传送和 event 传过去
          // 因为外部函数又是一个箭头函数所以我们的 this 也不会有问题
          this.addNum(66666,e)
        }}>事件传参 4</button>
      </div>
    );
  }
}
/*
  事件的绑定：
  事件中处理的内容如果业务逻辑不多，那么你就直接写行内事件进行处理即可
  如果说事件中需要处理的业务逻辑很多，那么我们可以先在外部定义一个函数，该函数是普通还是
  箭头函数都可以。关键的点就是我们 onClick 后要先写一个箭头函数，然后在该箭头函数中直接
  调用我们定义的函数即可，调用的时候如果有需要传递参数，那么这里可以直接传递
*/
export default App;
